<template>
  <view class="page flex-col">

    <view class="group_4 flex-row">
      <view class="image-text_5 flex-row">
        <image
            class="label_1"
            referrerpolicy="no-referrer"
            src="../img/file-icon.png"
        />
        <view class="text-group_6 flex-col">
          <text class="text_4">{{ constants.experiment_name }}</text>
          <text class="text_5">{{ constants.updated }}</text>
        </view>
      </view>
    </view>
    <view class="group_5 flex-col">
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验目的</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.objective">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验仪器和素材</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.instrument_equipment">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验原理</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.principle">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验步骤</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.steps">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">数据记录</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.data_records">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验结果</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.result">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">误差分析</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.error_analysis">
        </text>
      </view>
    </view>
    <bottomBackBtn></bottomBackBtn>
  </view>
  <view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" class="my-popup" type="bottom" background-color="#fff" borderRadius="12px 12px 0px 0px">
      <view class="popup-content">
        <view class="group_5 flex-col">
          <view class="box_9 flex-row justify-between">
            <text class="text_12">选择下载格式</text>
            <image
                @click="closePop"
                class="thumbnail_7"
                referrerpolicy="no-referrer"
                src="../img/close.png"
            />
          </view>
          <view class="section_2 flex-row justify-between" v-for="(item,index) in options" :key="index" @click="change(item)">
            <text class="text_13" :class="{'active': selOpt == item.value}">{{ item.label }}</text>
            <image
                v-if="selOpt == item.value"
                class="thumbnail_13"
                referrerpolicy="no-referrer"
                src="../img/check.png"
            />
          </view>
          <view class="text-wrapper_9 flex-col" @click="confirmSel">
            <text class="text_17">下载</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {baseUrl} from "../../../config";
export default {
  data() {
    return {
      constants: {},
      report_id: '',
      options: [{
        "value": 1,
        "label": "PDF",
        "tag": "",
        "text": "PDF"
      },{
        "value": 2,
        "label": "WORD",
        "tag": "",
        "text": "WORD"
      },],
      selOpt: null,
      baseUrl: baseUrl,
    };
  },
  async onLoad(option) {
    this.report_id = option.report_id
    this.handleGetReportDetail()
  },
  methods: {
    async handleGetReportDetail(){
      let param = {
        report_id: this.report_id,
      }
      let res = await this.API.ReportFetchModel(param)
      console.log('rrrrrr',res)
      this.constants = res
    },
    toggle(){
      console.log('this.$refs.popup',this.$refs.popup)
      this.$refs.popup.open()
    },
    closePop(){
      this.$refs.popup.close()
    },
    change(item){
      this.selOpt = item.value
    },
    confirmSel(){
      this.closePop()
      this.handleDownLoad()
    },
    handleDownLoad(){
      if(this.selOpt == 1){
        uni.downloadFile({
          url:`${this.baseUrl}/api/StudentExperiment/PdfForStudentExperiment?student_experiment_id=${this.constants.student_experiment_id}`, //仅为示例，并非真实的资源
          success: (res) => {
            if (res.statusCode === 200) {
              var filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function (res) {
                  console.log('打开文档成功');
                }
              });
            }
          }
        });
      } else if(this.selOpt == 2){
        uni.downloadFile({
          url:`${this.baseUrl}/api/StudentExperiment/WordForStudentExperiment?student_experiment_id=${this.constants.student_experiment_id}`, //仅为示例，并非真实的资源
          success: (res) => {
            if (res.statusCode === 200) {
              var filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function (res) {
                  console.log('打开文档成功');
                },
              });
            }
          }
        });
      } else {
        uni.showToast({
          title: '请选择下载格式',
          icon: "none",
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.my-popup{
  z-index: 999!important;
}
.popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
  border-radius: 12px 12px 0px 0px;
  .group_5 {
    background-color: rgba(255, 255, 255, 1);
    padding: 44rpx 48rpx 18rpx 48rpx;
  }

  .box_9 {
    width: 654rpx;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 50rpx;
  }

  .thumbnail_7 {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 10rpx;
  }

  .section_2 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 654rpx;
    margin-top: 32rpx;
    padding: 36rpx 0 40rpx 0;
  }

  .text_13 {
    overflow-wrap: break-word;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 1);
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
    &.active{
      color: rgba(39, 118, 255, 1);
    }
  }

  .thumbnail_13 {
    width: 40rpx;
    height: 40rpx;
    margin: 8rpx 0 4rpx 0;
  }

  .text-wrapper_6 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 462rpx 40rpx 0;
  }

  .text_14 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_7 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 430rpx 40rpx 0;
  }

  .text_15 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_8 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 462rpx 40rpx 0;
  }

  .text_16 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_9 {
    background-color: rgba(39, 118, 255, 1);
    border-radius: 6px;
    margin: 80rpx 8rpx 0 10rpx;
    padding: 22rpx 284rpx 22rpx 284rpx;
  }

  .text_17 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    line-height: 48rpx;
  }
}
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: calc(100vh - 96rpx);
  overflow: hidden;
}

.group_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 28rpx 28rpx 22rpx 42rpx;
}

.section_2 {
}

.text-wrapper_8 {
  width: 108rpx;
  height: 40rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_15 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_16 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.thumbnail_10 {
  width: 34rpx;
  height: 22rpx;
  margin: 8rpx 0 10rpx 438rpx;
}

.thumbnail_11 {
  width: 30rpx;
  height: 22rpx;
  margin: 6rpx 0 12rpx 10rpx;
}

.image_5 {
  width: 50rpx;
  height: 24rpx;
  margin: 6rpx 0 10rpx 10rpx;
}

.section_3 {
  width: 666rpx;
  margin: 42rpx 12rpx 0 2rpx;
}

.thumbnail_12 {
  width: 40rpx;
  height: 40rpx;
  margin: 2rpx 0 10rpx 0;
}

.text_3 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.thumbnail_4 {
  width: 40rpx;
  height: 8rpx;
  margin: 22rpx 0 22rpx 0;
}

.group_4 {
  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
  background-color: rgba(255, 255, 255, 1);
  padding: 24rpx 208rpx 24rpx 32rpx;
  height: 140rpx;
}

.image-text_5 {
  width: 510rpx;
}

.label_1 {
  width: 92rpx;
  height: 92rpx;
  margin-right: 10rpx;
}

.text-group_6 {
  margin: 4rpx 0 4rpx 0;
}

.text_4 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin-right: 226rpx;
}

.text_5 {
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 28rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin-top: 4rpx;
}

.group_5 {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 16rpx;
  padding: 32rpx 32rpx calc(144rpx + env(safe-area-inset-bottom)) 0;
  overflow-y: scroll;
  flex: 1;
}

.box_4 {
  width: 100%;
  //margin-right: 274rpx;
}

.group_7 {
  background-color: rgba(39, 118, 255, 1);
  width: 8rpx;
  height: 24rpx;
  margin: 8rpx 20rpx 8rpx 0;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text-wrapper_9 {
  margin: 16rpx 0 0 32rpx;
}

.text_7 {
  width: 686rpx;
  //height: 600rpx;
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-weight: normal;
  text-align: justify;
  line-height: 40rpx;
}

.box_5 {
  width: 228rpx;
  margin: 32rpx 490rpx 0 0;
}

.box_1 {
  background-color: rgba(39, 118, 255, 1);
  width: 8rpx;
  height: 24rpx;
  margin: 8rpx 0 8rpx 0;
}

.text_8 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text-wrapper_10 {
  margin: 16rpx 0 0 32rpx;
}

.text_9 {
  width: 686rpx;
  height: 600rpx;
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-weight: normal;
  text-align: justify;
  line-height: 40rpx;
}

.box_6 {
  margin: 32rpx 0 0 32rpx;
}

.group_10 {
  background-color: rgba(234, 234, 234, 1);
  width: 686rpx;
  height: 306rpx;
}

.box_7 {
  width: 718rpx;
  margin-top: 32rpx;
}

.box_2 {
  background-color: rgba(39, 118, 255, 1);
  width: 8rpx;
  height: 24rpx;
  //margin: 8rpx 0 624rpx 0;
}

.text-group_7 {
}

.text_10 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin-right: 490rpx;
}

.text_11 {
  width: 686rpx;
  height: 600rpx;
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 28rpx;
  font-weight: normal;
  text-align: justify;
  line-height: 40rpx;
  margin-top: 16rpx;
}

.group_12 {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 24rpx;
  padding: 26rpx 32rpx 18rpx 32rpx;
  height: calc(48rpx + 40rpx + 26rpx + 18rpx + 24rpx);
}

.box_8 {
  width: 686rpx;
}

.section_1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  border: 1px solid rgba(230, 235, 241, 1);
  padding: 20rpx 22rpx 20rpx 22rpx;
}

.image-text_6 {
  width: 116rpx;
}

.thumbnail_13 {
  width: 40rpx;
  height: 40rpx;
  margin: 4rpx 0 4rpx 0;
}

.text-group_3 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 34rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 48rpx;
}

.text-wrapper_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  border: 1px solid rgba(39, 118, 255, 1);
  padding: 22rpx 174rpx 18rpx 176rpx;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(39, 118, 255, 1);
  font-size: 34rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 48rpx;
}

.image-wrapper_3 {
  width: 268rpx;
  align-self: center;
  margin-top: 66rpx;
}

.image_6 {
  width: 268rpx;
  height: 10rpx;
}

</style>